<template>
  <div>

    <span style="letter-spacing:5px;
  background-image:-webkit-linear-gradient(bottom,#2451d6,#234875,#2ba4ca);
  -webkit-background-clip:text;
   -webkit-text-fill-color:transparent;
   font-size: 20px ">
    <strong>{{sydw}}</strong>
    </span>

  <el-row style="height: 50vh;width: 100%;">

    <el-col :span="8" style="height: 100%">
      <div id="topDevStatistics" style="width: 100%;height: 100%;margin: 1%"></div>
    </el-col>

    <el-col :span="16"style="height: 100%">

      <el-row style="height: 25vh;">
        <el-col :span="24" style="height: 100%;">
        <div id="usedTime" style="width: 100%;height: 100%;margin: 1%;"></div>
        </el-col>
      </el-row>

      <el-row style="height: 25vh;">
        <el-col :span="24" style="height: 100%;">
          <div id="nominalVolStatistics" style="width: 100%;height: 100%;margin: 1%"></div>
        </el-col>
      </el-row>
    </el-col>

  </el-row>


  <el-row style="height: 50vh;width: 100%;margin: 1%">
    <el-col style="height: 50vh;">
      <el-table :data="tableData" border>
        <el-table-column property="id" fixed type="index" :index="indexMethod" label="序号" fixed ></el-table-column>
        <el-table-column property="sbdjh" label="设备登记号" ></el-table-column>
        <el-table-column property="sblb" label="设备分类"></el-table-column>
        <el-table-column property="xyyl" label="关键参数（压力）"></el-table-column>
        <el-table-column property="tyrq" label="投用日期"></el-table-column>
        <el-table-column property="jyrq" label="检验日期"></el-table-column>
<!--        <el-table-column property="checkrep" label="检验报告"></el-table-column>-->
        <el-table-column property="xgjyrq" label="下一次检验日期"></el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page="currentPage"
        :page-sizes="[10, 15, 20, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="display: flex;flex-direction: row;justify-content: flex-end;"
      >
      </el-pagination>
    </el-col>
  </el-row>
  </div>
</template>

<script>
    import Breadcrumb from "../../BreadCrumb/BreadCrumb";
    import * as echarts from "echarts";
    import totalTable from '../../../../../assets/totalTable.json'

    export default {
        name: "detail",
      props: {
        sydw: {
          type: String,
          default: ''
        }
      },
      data(){
          return{
            yali:{
              低压:0,
              中亚:0,
              次高压:0,
              高压:0,
              超临界:0,
              超超临界:0
            },
            yaliTable:[],
            useYearNum:[],
            useYear:[],
            yearTable:[],
            objects:[],
            sourceTable:[],
            tableData:[],
            typeData:[],
            yearData:[],
            ylData:[],
            naviBasicItems: [{ text: '电站锅炉' }, { text: '使用单位', to: '/guolu/dataCloudService/sydw/list' }],
            naviItems: [],
            loading: false,
            total:"",
            yjr:"",
            cyrs:"",
            cyzq:"",
            currentPage:1,
            pagesize:10,

          }
      },
      created() {
        (this.naviItems = [...this.naviBasicItems])
      },
      mounted() {
        this.showTable();
        this.showYear();
        this.showType();
        this.showYali();
        this.topDevStatisticsShow();
        this.usedTimeShow();
        this.nominalVolStatisticsShow();


      },
      components: {
        Breadcrumb,
      },
      methods:{
        // switchList() {
        //   this.$emit("switchList");
        // },
        indexMethod(index){
          return (this.currentPage-1)*this.pagesize+index+1
        },
        showType(){
          this.sourceTable=totalTable;
          let obj={
            yjr:0,
            cyrs:0,
            cyzq:0
          }
          this.objects.push(obj);

          for(let i=0;i<this.sourceTable.length;i++){
            if((this.sourceTable[i].sydw==this.sydw)&&this.sourceTable[i].sblb=="有机热载体锅炉"){
              this.objects[0].yjr+=1;
            }
            if((this.sourceTable[i].sydw==this.sydw)&&this.sourceTable[i].sblb=="承压热水锅炉"){
              this.objects[0].cyrs+=1;
            }
            if((this.sourceTable[i].sydw==this.sydw)&&this.sourceTable[i].sblb=="承压蒸汽锅炉"){
              this.objects[0].cyzq+=1;
            }

          }
        },
        showYear(){
          this.sourceTable=totalTable;
          let temp=[];
          for(let i=0;i<this.sourceTable.length;i++){
            if(this.sourceTable[i].sydw==this.sydw){
            temp.push(this.sourceTable[i].tyrq.slice(0,4));
            }
          }

          for(let j in temp){
            if(this.useYear.indexOf(temp[j])==-1){
              this.useYear.push(temp[j]);
            }
          }

          for(let q=0;q<this.useYear.length;q++){
            let year={
              year_in:"",
              num:0
            }
            year.year_in=this.useYear[q];
            this.yearTable.push(year);
          }

          for(let m=0;m<this.yearTable.length;m++){
            for(let n=0;n<this.tableData.length;n++){
              if(this.tableData[n].tyrq.slice(0,4)==this.yearTable[m].year_in){
                this.yearTable[m].num+=1;
              }
            }
          }

          for(let s=0;s<this.yearTable.length;s++){
            this.useYearNum[s]=this.yearTable[s].num;
          }

        },

        showYali(){

          for(let p=0;p<this.tableData.length;p++){
            switch(this.tableData[p].ylfl){
              case "低压":this.yali.低压+=1;break;
              case "中亚":this.yali.中亚+=1;break;
              case "次高压":this.yali.次高压+=1;break;
              case "高压":this.yali.高压+=1;break;
              case "超临界":this.yali.超临界+=1;break;
              case "超超临界":this.yali.超超临界+=1;break;
              default:break;
            }

          }
          console.log(this.yali);

        },

        showTable(){
          this.sourceTable=totalTable;
          for(let i=0;i<this.sourceTable.length;i++){
            if(this.sourceTable[i].sydw==this.sydw){
              this.tableData.push(this.sourceTable[i]);
            }
          }
          this.total=this.tableData.length;
        },
        topDevStatisticsShow: function () {
          let Devtype={
            option: {
              color: ['#d0961f', 'rgba(14,178,243,0.76)','#d0661f'],
                title: {
                //show:false,
                left: "10%",
                  top: '1%',
                  text: '锅炉类型',
                  textStyle: {
                  fontSize: 15,
                    fontWeight: 'bold',
                    color: '#3e7bd6'
                }
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                top: '10%',
                  left: 'left',
                  orient:'vertical'
              },
              series: [{

                radius: '95%',
                type: 'pie',       //柱状图，line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、...
                data: [
                  {value: this.objects[0].yjr, name: '有机热载体锅炉'},
                  {value:  this.objects[0].cyrs, name: '承压热水锅炉'},
                  {value:  this.objects[0].cyzq, name: '承压蒸汽锅炉'},
                ],
                label: {  //图上方显示值
                  normal: {
                    show: true,
                    formatter:function(data){
                      return data.value+',\n  '+data.percent.toFixed(0)+"%"; //取小数点后0位
                    },
                    position:'inside'
                  }
                },
                emphasis: {
                  itemStyle: {
                    shadowBlur: 30,
                    shadowOffsetX: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }]
            }
          }
          let chartDom1 = document.getElementById('topDevStatistics');
          let myChart2 = echarts.init(chartDom1);
          let option2 = Devtype.option;
          myChart2.setOption(option2);
        } ,
        usedTimeShow: function () {
          let first= {
            option: {
              color: ['#3177c2'],
                title: {
                //show:false,
                left: "center",
                  top: '1%',
                  text: '锅炉年份',
                  textStyle: {
                  fontSize: 15,   //不知道为什么这个设置无效
                    fontWeight: 'bold',
                    color: '#3e7bd6'
                }
              },
              tooltip: {},
              legend: {},
              xAxis: {
                axisLabel: {//文字倾斜
                  interval: 0,
                    rotate: 40
                },
                data: this.useYear,
              },
              yAxis: {
                type: 'value',
                  //scale: true,
                  name: '单位：台',
                  minInterval: 1,
                  boundaryGap: [0, 0.1],
              },
              series: [{
                barWidth: '50%',
                type: 'bar',       //柱状图，line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、...
                data: this.useYearNum,
                label: {  //图上方显示值
                  normal: {
                    show: true,
                    position: 'top'
                  }
                }
              }]
            }

          }
          var chartDom1 = document.getElementById('usedTime');
          var myChart2 = echarts.init(chartDom1);
          var option2 = first.option
          myChart2.setOption(option2);
        } ,

        nominalVolStatisticsShow: function () {
          let second= {
            option: {
              color: ['#3177c2'],
                title: {
                //show:false,
                left: "center",
                  top: '1%',
                  text: '锅炉压力',
                  textStyle: {
                  fontSize: 15,   //不知道为什么这个设置无效
                    fontWeight: 'bold',
                    color: '#3e7bd6'
                }
              },
              tooltip: {},
              legend: {},
              xAxis: {
                data: ["低压", "中压", "次高压","高压", "超临界", "超超临界"]
              },
              yAxis: {
                type: 'value',
                  //scale: true,
                  name: '单位：°C',
                  minInterval: 1,
                  boundaryGap: [0, 0.1],
              },
              series: [{
                barWidth: '50%',
                type: 'bar',       //柱状图，line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、...
                data: [this.yali.低压,this.yali.中亚,this.yali.次高压,
                  this.yali.高压,this.yali.超临界,this.yali.超超临界],
                label: {  //图上方显示值
                  normal: {
                    show: true,
                    position: 'top'
                  }
                }
              }]
            }

          }
          let chartDom1 = document.getElementById('nominalVolStatistics');
          let myChart2 = echarts.init(chartDom1);
          let option2 = second.option
          myChart2.setOption(option2);
        },
        // showDetail(id) {
        //    dialogTableVisible = true;
        // }
        //async pageSizeChange(pageSize) {
        //  this.args.num = pageSize
        //  this.args.offset = 0
       ////   this.searchData()
      //  },
        // 页数改变
       // async pageChange(page) {
        //  console.log('现在是第 ', this.currentPage, ' 页')
         // this.args.offset = (page - 1) * this.args.num
         // this.currentPage = page
         // this.searchData()
       // }

      }
    }
</script>

<style scoped>

</style>
